
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq轮播</title>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .swiper-contione {
            width: 1000px;
            height: 800px;
            overflow: hidden;
            margin: 20px auto;
            position: relative;
        }

        .swiper {
            width: 9999999px;
            height: 400px;
            transition: all 1s ease;
        }

        .swiper-item {
            width: 600px;
            height: 400px;
            float: left;
            position: relative;
        }

        .swiper-item img {
            width: 1000px;
            height: 800px;
        }

        .swiper-item p {
            width: 100%;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }

        .swiper-point {
            width: 100%;
            height: 40px;
            position: absolute;
            bottom: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        .point {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.9);
            margin-right: 5px;
            float: left;
        }

        .point.active {
            background: #fff;
        }

        .swiper-left {
            width: 60px;
            height: 100%;
            position: absolute;
            top: 0;
            left: -60px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s ease;
        }

        .swiper-right {
            width: 60px;
            height: 100%;
            position: absolute;
            top: 0;
            right: -60px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s ease;
        }

        .swiper-left img,
        .swiper-right img {
            cursor: pointer;
        }

        .swiper-contione:hover .swiper-left {
            left: 0;
        }

        .swiper-contione:hover .swiper-right {
            right: 0;
        }
    </style>
</head>
<body>
<div class="swiper-contione">
    <div class="swiper">
        <div class="swiper-item">
            <img src="./img/DSC_0100-1280x768.jpg">
            <p>这是第一</p>
        </div>
        <div class="swiper-item">
            <img src="img/2019sports-1280x768.jpg">
            <p>这是第二</p>
        </div>
        <div class="swiper-item">
            <img src="img/buwangchuxin-1280x640.jpg">
            <p>这是第三</p>
        </div>
        <div class="swiper-item">
            <img src="img/jjj1280-600-1280x600.jpg">
            <p>这是第四</p>
        </div>
    </div>
    <div class="swiper-point">
        <div class="swiper-point-item">
            <div class="point active"></div>
            <div class="point"></div>
            <div class="point"></div>
            <div class="point"></div>
        </div>
    </div>
    <div class="swiper-left">
        <img src="./img/left.png">
    </div>
    <div class="swiper-right">
        <img src="img/right.png">
    </div>
</div>
</body>
<script type="text/javascript">
    class Swiper {
        constructor() {
            this.w = $('.swiper-item').width();
            this.num = 0;
            this.len = $('.swiper .swiper-item').length - 1;
            this.timer = null;
        }
        init() {
            //设置定时器
            this.setTime();
            //滑上停止定时器
            this.hover();
            //点击指示
            this.pointClick();
            //点击左右箭头
            this.lrClick();
        }
        setTime() {
            this.timer = setInterval(() => {
                this.num++;
                if (this.num > this.len) {
                    this.num = 0;
                }
                let cssTrx = -this.num * this.w;
                $('.swiper-point-item .point').eq(this.num).addClass('active').siblings().removeClass('active');
                $('.swiper').css({transform: `translateX(${cssTrx}px)`})
            }, 3000)
        }
        hover() {
            $('.swiper-contione').hover(() => {
                clearInterval(this.timer)
            }, () => {
                this.setTime();
            });
        }
        pointClick() {
            let that = this;
            $('.swiper-point-item .point').click(function() {
                that.num = $(this).index();
                let cssTrx = -that.num * that.w;
                $(this).addClass('active').siblings().removeClass('active');
                $('.swiper').css({
                    transform: `translateX(${cssTrx}px)`
                })
            })
        }
        lrClick() {
            $('.swiper-left img').click(() => {
                this.num--;
                if (this.num < 0) {
                    this.num = this.len;
                };
                console.log(this.num)
                let cssTrx = -this.num * this.w;
                $('.swiper-point-item .point').eq(this.num).addClass('active').siblings().removeClass('active');
                $('.swiper').css({
                    transform: `translateX(${cssTrx}px)`
                })
            });

            $('.swiper-right img').click(() => {
                this.num++;
                if (this.num > this.len) {
                    this.num = 0;
                }
                let cssTrx = -this.num * this.w;
                $('.swiper-point-item .point').eq(this.num).addClass('active').siblings().removeClass('active');
                $('.swiper').css({
                    transform: `translateX(${cssTrx}px)`
                })
            })
        }
    }
    let sw = new Swiper();
    sw.init();
</script>
</html>
